<!--
  功能：功能描述
  作者：王代彬
  时间：2020年11月26日 13:36:47
  版本：v1.0
-->
<template>
	<div class="meeting">
		<h2>自定义样式</h2>
		<div class="legend">
			<span class="name name-turquoise-400">配合工时</span>
			<div>
				尽调工作影响：
				<span class="name name-blue-600">影响商户能耗供给</span>
				<span class="name name-blue-400">影响管道/保温破损</span>
				<span class="name name-blue-200">引起租户/顾客恐慌</span>
				<span class="name name-grey-300">不影响</span>
			</div>
		</div>
		<div id='myChart'></div>
	</div>
</template>

<script>
import echarts from './chart'
export default {
	data () {
		return {
			classList: [
				{
					label: '影响商户能耗供给',
					className: 'blue-600'
				},
				{
					label: '影响管道/保温破损',
					className: 'blue-400'
				},
				{
					label: '引起租户/顾客恐慌',
					className: 'blue-200'
				},
				{
					label: '不影响',
					className: 'grey-300'
				},
				{
					label: '配合工时',
					className: 'turquoise-400'
				}
			]
		}
	},
	methods: {
		drawLine () {
			let _this = this
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'))
			// 绘制图表
			const option = {
				confine: true, // 解决浮窗被截断问题
				tooltip: {
					backgroundColor: '#fff', // 提示浮窗背景颜色
					extraCssText: 'box-shadow: 0 3px 12px rgba(27, 34, 41, 0.12);',
					trigger: 'axis',
					textStyle: {
						// fontSize: 30,
						color: '#333'
					},
					axisPointer: {
						type: 'shadow',
						shadowStyle: {
							color: 'rgba(36,111,229,0.1)'
						}
					},
					formatter: (list) => {
						let str = ''
						list.forEach((item, index) => {
							let title = ''
							let com = '个'
							if (index === 0) {
								title = `<div class="sub-title">尽调工作影响</div>`
							} else if (index === 4) {
								com = '分钟'
								title = `<div class="sub-title working-hours">配合工时</div>`
							}
							let o = _this.classList.find(x => x.label === item.seriesName) || {}
							str += `${title}
                            <div class="item item-${o.className}">${item.seriesName}  <span>${item.data}</span> ${com}</div>`
						})

						return `<div class="tooltip-container">
                                    <div class="title">${list[0].name}专业</div>
                                   ${str}
                                <div>`
					}
				},
				legend: {
					show: false
				},
				grid: {
					top: '13%',
					left: '3%',
					right: '0%',
					bottom: '2%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						axisTick: {// 坐标轴刻度相关设置。
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {// 坐标轴刻度标签的相关设置。
							// interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
							// margin: 15,
							textStyle: {
								color: '#2E3742',
								fontStyle: 'normal',
								fontFamily: '微软雅黑',
								fontSize: 14,
								fontWeight: 400
							}
						},
						data: ['强电', '空调', '消防', '给排水', '电梯', '弱电', '安防']
					}
				],
				yAxis: [
					{
						name: '尽调项数量',
						type: 'value',
						nameTextStyle: {
							color: '#8B949E',
							fontSize: 14
						},
						axisLine: {
							show: false
						},
						axisTick: {// 坐标轴刻度相关设置。
							show: false
						}
					},
					{
						type: 'value',
						name: '',
						position: 'right',
						axisLine: {
							show: false,
							lineStyle: {
								color: '#cdd5e2'
							}
						},
						axisTick: {// 坐标轴刻度相关设置。
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: true,
							formatter: (value) => {
								console.log(value)
								if (value >= 60) return '1小时'
								return `${value} 分钟`
							}, // 右侧Y轴文字显示
							textStyle: {
								color: '#666666'
							}
						}
					}
				],
				series: [
					{
						name: '影响商户能耗供给',
						type: 'bar',
						stack: 'Ad',
						barWidth: 16,
						emphasis: {
							focus: 'series'
						},
						itemStyle: {
							normal: {
								color: '#215DD9'
							}
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: '影响管道/保温破损',
						type: 'bar',
						stack: 'Ad',
						emphasis: {
							focus: 'series'
						},
						itemStyle: {
							normal: {
								color: '#2481F2'
							}
						},
						data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
						name: '引起租户/顾客恐慌',
						type: 'bar',
						stack: 'Ad',
						emphasis: {
							focus: 'series'
						},
						itemStyle: {
							normal: {
								color: '#9FC9FB'
							}
						},
						data: [862, 1018, 964, 1026, 1679, 1600, 1570]
					},
					{
						name: '不影响',
						type: 'bar',
						stack: 'Ad',
						emphasis: {
							focus: 'series'
						},
						itemStyle: {
							normal: {
								color: '#E1E5EB'
							}
						},
						data: [100, 200, 300, 400, 500, 600, 570]
					},
					{
						name: '配合工时',
						type: 'bar',
						barWidth: 16,
						yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
						itemStyle: {
							normal: {
								color: '#33D4D2'
							}
						},
						data: [5, 40, 67, 100, 130, 21, 16]
					}
				]
			}
			myChart.setOption(option)
		}
	},
	mounted () {
		this.$nextTick(() => {
			this.drawLine()
		})
	}
}
</script>

<style lang='less' scoped>
.meeting {
	width: 716px;
	height: 400px;

	.legend {
		text-align: right;

		.name {
			position: relative;
			margin-left: 38px;

			&::before {
				position: absolute;
				top: 2px;
				left: -22px;
				display: inline-block;
				content: "";
				width: 14px;
				height: 14px;
				border-radius: 2px;
			}

			&-turquoise-400::before {
				background-color: #33D4D2;
			}

			&-blue-600 {
				margin-left: 24px;

				&::before {
					background-color: #215DD9;
				}
			}

			&-blue-400::before {
				background-color: #2481F2;
			}

			&-blue-200::before {
				background-color: #9FC9FB;
			}

			&-grey-300::before {
				background-color: #E1E5EB;
			}
		}

		div {
			margin-top: 12px;
		}
	}

	#myChart {
		width: 100%;
		height: 340px;
	}
}

/deep/ .tooltip-container {
	padding: 6px 14px;
	font-family: 'Microsoft YaHei UI';
	font-size: 14px;

	.title {
		margin-bottom: 10px;
		font-weight: bold;
		color: #2E3742;
	}

	.sub-title {
		margin-bottom: 8px;
		color: #8B949E;
	}

	.working-hours {
		margin-top: 12px;
	}

	.item {
		margin-bottom: 8px;
		margin-left: 20px;
		position: relative;

		span {
			font-size: 16px;
			font-weight: bold;
		}

		&::before {
			position: absolute;
			top: 2px;
			left: -22px;
			display: inline-block;
			content: "";
			width: 14px;
			height: 14px;
			border-radius: 2px;
		}

		&-turquoise-400::before {
			background-color: #33D4D2;
		}

		&-blue-600::before {
			background-color: #215DD9;
		}

		&-blue-400::before {
			background-color: #2481F2;
		}

		&-blue-200::before {
			background-color: #9FC9FB;
		}

		&-grey-300::before {
			background-color: #E1E5EB;
		}
	}
}
</style>
